<div id='friendsdiv'>Loading...</div>
<script type="text/javascript">
// This sample lists up to 20 of the viewer's friends and displays
// their names and profile picture thumbnails 

function init() {
   var req = opensocial.newDataRequest();
   var opt_params = {};
   opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 20;
   opt_params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
          opensocial.Person.Field.THUMBNAIL_URL
   ];
   var idspec = opensocial.newIdSpec({ "userId" : "VIEWER", 
                                       "groupId" : "FRIENDS" });
   req.add(req.newFetchPeopleRequest(idspec,
      opt_params), 'viewerFriends');

   req.send(onLoadFriends);
   debug.say("Waiting for reply...");
}

function formatFriend(f) {
   var thumburl = f.getField(opensocial.Person.Field.THUMBNAIL_URL);
   var name = gadgets.util.escapeString(f.getDisplayName());
   return "<img src='" + thumburl + "'> " + name + "<br>";
}

function onLoadFriends(data) {
  if (data.hadError()) {
     debug.say("Error: " + data.getErrorMessage());
     // handle error here
     return;
  }

  var friends = data.get('viewerFriends').getData().asArray();
 
  debug.say(friends.length + " friends returned.");
  var html = [];
  for (var i in friends)
    if (friends[i].getId())
       html.push(formatFriend(friends[i]));
  document.getElementById('friendsdiv').innerHTML = html.join('');
}  

gadgets.util.registerOnLoadHandler(init);
</script>
